<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100%;
            height: 100vh;
            color: #8e8e8e;
        }

        .head {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 50px;
            color: #fff;
            line-height: 50px;
            background-color: #000;
        }

        .head .head-left {
            float: left;
            width: 220px;
            height: auto;
            margin-left: 10px;
            text-align: center;
        }

        .head .head-left a {
            display: block;
            width: 30px;
            height: 30px;
            /* background: url(./编辑.svg) no-repeat; */
        }

        .head .head-right {
            margin-right: 30px;
            float: right;
        }

        .users {
            position: relative;
            width: 70px;
            height: 120px;
            text-align: center;
        }

        .users .users-list {
            position: absolute;
            display: none;
            width: 70px;
            height: auto;
            color: #000;
            z-index: 9;
            background-color: #fff;
            border: 1px solid #e6e6e6;
        }

        .users:hover .users-list {
            display: block;
        }

        .users .users-list a {
            display: block;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
        }

        .users .users-list a:hover {
            background-color: #e6e6e6;
        }

        .left-nav {
            position: absolute;
            left: 0;
            top: 50px;
            width: 221px;
            height: calc(100vh - 50px);
            text-align: center;
            border: 1px solid #131e26;
            background-color: rgb(34, 35, 36);
        }

        .left-nav div {
            margin-top: 50px;
        }

        .left-nav p {
            width: 98%;
            height: 40px;
            line-height: 40px;
            margin: 20px 0;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        .left-nav p:hover {
            font-size: 18px;
            color: #fff;
            background-color: rgb(53, 51, 51);
        }

        .right-show {
            position: absolute;
            top: 50px;
            right: 0;
            width: calc(100vw - 245px);
            height: calc((100vh - 55px));
            border: 1px solid #e6e6e6;
        }

        /* top */
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 80%;
            text-align: center;
            margin: 0 auto;
            border-collapse: separate;
            border-spacing: 0px 20px;
        }

        th,
        td {
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #000;
        }

        .current {
            color: #fff;
        }

        .itemTop {
            display: none;
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="head-left">
            <p>鑫哥的后宫</p>
            <a></a>
        </div>

        <div class="head-right">
            <div class="users" id="user">用户
                <p class="users-list" id="userList">
                    <a>个人信息</a>
                    <a>切换账号</a>
                    <a>退出</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 左侧菜单栏 -->
    <div class="left-nav">
        <div>
            <p class="current">管理员管理</p>
            <p>用户管理</p>
            <p>社区管理</p>
            <p>个人账单管理</p>
        </div>

    </div>

    <!-- 右侧显示栏 -->
    <div class="right-show">

        <!-- 管理员管理 -->
        <table class="itemTop" style="display:block;">
            <tr>
                <th>管理员ID</th>
                <th>管理员账号</th>
                <th>管理员密码</th>
                <th>管理员角色</th>
                <th>最后一次登录时间</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>

        <!-- 用户管理 -->
        <table class="itemTop">
            <tr>
                <th>用户ID</th>
                <th>用户头像</th>
                <th>用户昵称</th>
                <th>用户性别</th>
                <th>用户邮箱</th>
                <th>操作</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>

        <!-- 社区管理 -->
        <table class="itemTop">
            <tr>
                <th>用户昵称</th>
                <th>文章内容</th>
                <th>评论内容</th>
                <th>操作</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
        </table>

        <!-- 个人账单管理 -->
        <table class="itemTop"></table>
    </div>


    <script>
        let indexs = document.querySelector('.left-nav'),
            indexP = document.querySelectorAll('.left-nav p'),
            items = document.querySelectorAll('.itemTop');
        for (let x = 0; x < indexP.length; x++) {
            indexP[x].setAttribute('index', x);
            indexP[x].onclick = function () {
                for (let i = 0; i < indexP.length; i++) {
                    indexP[x].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for (let j = 0; j < items.length; j++) {
                    items[j].style.display = 'none';
                }
                items[index].style.display = 'block';

            }
        }
    </script>
</body>

</html>